<template>
	<view class="select-ruler">
		<!-- 遮罩层 -->
		<view class="tap-mask" v-if="disable"></view>
		<!-- 线 -->
		<view class="line">
			<view class="value">{{linValue}}{{unit}}</view>
		</view>
		<!-- <view class="row-line"></view> -->
		<!-- 左右渐变遮罩 -->
		<view class="mask mask-left"></view>
		<view class="mask mask-right"></view>
		<!-- 刻度尺 -->
		<scroll-view :scroll-x="true" @scroll="handleScroll" :scroll-left="scroll_left">
			<text class="ruler-item span-item" v-for="(item, index) in (max - min + 1)">
				<text>{{((index + min)/multiple).toFixed(point)}}</text>
			</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "select-ruler",
		data() {
			return {
				number: 0,
				scroll_left: 1,
				scroll: {
					detail: {},
				},
				linValue: 0,
			};
		},
		props: {
			// 最小值
			min: {
				type: Number,
				default: 0
			},
			// 最大值
			max: {
				type: Number,
				default: 500
			},
			unit: {
				type: [String, Number],
				default: ''
			},
			// 缩放比例
			multiple: {
				type: Number,
				default: 1
			},
			// 默认值
			defaultValue: {
				type: [String, Number],
				default: 0
			},
			// 是否禁用
			disable: {
				type: Boolean,
				default: false,
			},
			// 小数点后保留位数
			point: {
				type: Number,
				default: 0,
			}
		},
		created() {
			// 等待滚动条初始化完成
			setTimeout(() => {
				this.setDefault(this.defaultValue);
			}, 500);
		},
		methods: {
			// 刻度尺滚动监听
			handleScroll(e) {
				this.scroll = e;
				this.number = Math.round(e.detail.scrollLeft / Math.round((e.detail.scrollWidth - 375) / this.max));
				this.linValue = ((this.number + this.min) / this.multiple).toFixed(this.point)
				this.$emit('change', ((this.number + this.min) / this.multiple).toFixed(this.point));
			},
			// 初始化刻度尺
			initScroll() {
				this.scroll_left = this.number * Math.round(((this.scroll.detail.scrollWidth || 1890) - 375) / this.max);
			},
			// 设置默认值
			setDefault(number) {
				if (number < this.min || number > this.max) {
					uni.showToast({
						title: `数值超出范围(${this.min/this.multiple}-${this.max/this.multiple})`,
						icon: 'none'
					});
				}
				if (number < this.min) number = this.min;
				if (number > this.max) number = this.max;
				this.number = number - this.min;
				this.linValue = this.number.toFixed(this.point)
				this.initScroll();
			},
			// 增加
			plusValue(step) {
				this.setDefault(this.number + this.min + Math.floor(step));
			},
			// 减少
			reduceValue(step) {
				this.setDefault(this.number + this.min - Math.floor(step));
			},
		}
	}
</script>

<style scoped lang="scss">
	.select-ruler {
		width: 100%;
		height: 180rpx;
		margin-top: 20rpx;
		position: relative;
		background: #fff;

		.tap-mask {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 10;
			top: 0;
			left: 0;
		}

		.line {
			width: 10rpx;
			position: absolute;
			left: 366rpx;
			top: 40rpx;
			text-align: center;

			.value {
				font-size: 24rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 33rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -30rpx;
			}

			&::after {
				content: '';
				width: 4rpx;
				height: 40rpx;
				background: #000000;
				display: inline-block;
				vertical-align: text-top;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 10rpx;
			}

			&::before {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0rpx;
				content: '';
				width: 0;
				height: 0;
				// 因为我需要的是倒三角,所以只需要给 border-top加颜色即可,其他的就让它透明,以此类推
				border-top: 20rpx solid #000000;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-bottom: 20rpx solid transparent;
			}
		}

		.row-line {
			width: 100%;
			height: 1px;
			background: rgba(#3A414B, .07);
			top: 40rpx;
			left: 0;
			position: absolute;
		}

		.mask {
			width: 150rpx;
			height: 180rpx;
			position: absolute;
			top: 0;
			z-index: 2;
			pointer-events: none;

			&.mask-left {
				left: 0;
				background-image: linear-gradient(to right, #fff, rgba(#fff, 0));
			}

			&.mask-right {
				right: 0;
				background-image: linear-gradient(to right, rgba(#fff, 0), #fff);
			}
		}

		scroll-view {
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.ruler-item {
				width: 10rpx;
				text-align: center;
				display: inline-block;
				position: relative;
				padding-top: 60rpx;
				vertical-align: bottom;

				&:first-child {
					margin-left: 366rpx;
				}

				&:last-child {
					margin-right: 376rpx;
				}

				&:before {
					content: '';
					width: 1px;
					height: 30rpx;
					background: rgba(#3A414B, .07);
					display: inline-block;
					vertical-align: bottom;
				}

				text {
					position: absolute;
					bottom: -40rpx;
					left: 50%;
					transform: translateX(-50%);
					color: #BCBCBC;
					font-size: 20rpx;
					display: none;
				}

				&:nth-child(10n+1) {
					&::before {
						width: 1px;
						height: 60rpx;
					}

					text {
						display: block;
					}
				}

			}
		}
	}
</style>